<template>
  <div class="login" ref="vantaRef">
    <LoginPanel />
  </div>
</template>

<script>
import { defineComponent, ref, onMounted, onBeforeUnmount } from 'vue'
import LoginPanel from './cpns/login-panel.vue'
// import * as THREE from 'three'
// import CLOUDS from '@/utlis/background.js'

export default defineComponent({
  components: {
    LoginPanel
  },
  data: function () {
    return {}
  },
  // mounted() {
  // this.vantaEffect = CLOUDS({
  //   el: this.$refs.vantaRef,
  //   THREE: THREE,
  //   /*以下为样式配置*/
  //   mouseControls: true,
  //   touchControls: true,
  //   gyroControls: false,
  //   minHeight: 200.0,
  //   minWidth: 200.0,
  //   skyColor: 0x26b9f2,
  //   cloudColor: 0xb7c9e8,
  //   cloudShadowColor: 0x2f3a48,
  //   sunColor: 0x5c452f,
  //   sunGlareColor: 0xd4a798,
  //   sunlightColor: 0xdc9c59,
  //   speed: 1.2
  // })
  // VANTA.CLOUDS({
  //   el: this.$refs.vantaRef,
  //   /*以下为样式配置*/
  //   mouseControls: true,
  //   touchControls: true,
  //   gyroControls: false,
  //   minHeight: 200.0,
  //   minWidth: 200.0,
  //   skyColor: 0x26b9f2,
  //   cloudColor: 0xb7c9e8,
  //   cloudShadowColor: 0x2f3a48,
  //   sunColor: 0x5c452f,
  //   sunGlareColor: 0xd4a798,
  //   sunlightColor: 0xdc9c59,
  //   speed: 1.2
  // })
  // },

  // beforeUnmount() {
  //   if (this.vantaEffect) {
  //     this.vantaEffect.destroy()
  //   }
  // },
  setup() {
    //使用ref引用挂载区域
    const vantaRef = ref(null)
    //创建一个全局的变量来使用vanta.js
    /**
     *因为在vue2中，是使用this.vantaEffect来创建指定的3d动画模板的
     *但是vue3 setup中是没有this，所以要另外创建一个
     **/
    let vantaEffect = null
    //在两个生命周期钩子内创建vantaEffect

    onMounted(() => {
      // vantaEffect = CLOUDS({
      //   el: vantaRef.value,
      //   THREE: THREE
      //   /*以下为样式配置*/
      //   // mouseControls: true,
      //   // touchControls: true,
      //   // gyroControls: false
      //   // minHeight: 200.0,
      //   // minWidth: 200.0,
      //   // skyColor: 0x26b9f2,
      //   // cloudColor: 0xb7c9e8,
      //   // cloudShadowColor: 0x2f3a48,
      //   // sunColor: 0x5c452f,
      //   // sunGlareColor: 0xd4a798,
      //   // sunlightColor: 0xdc9c59,
      //   // speed: 1.2
      // })
    })

    onBeforeUnmount(() => {
      if (vantaEffect) {
        vantaEffect.destroy()
      }
    })

    return { vantaRef }
  }
})
</script>

<style scoped lang="scss">
.login {
  // background-color: #f5f0e7;
  // background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%2331d5c2' fill-opacity='0.52'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-image: url('@/assets/pexels-pedro-figueras-681467.jpg');
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  // background: url('../../assets/img/login-bg.svg');
}
</style>
